<script>
import $ from "jquery";
export default {
  components: {},
  name: "",
  data() {
    return {};
  },
  props: {},
  setup() {},
  methods: {
    toTop() {
      $("html,body").animate({ scrollTop: 0 }, 500);
    },
    toScrollFn(el) {
      let targetElement = document.getElementById(el);
      console.log(targetElement);
      targetElement.scrollIntoView({ behavior: "smooth" });
    },
  },
  mounted() {
    window.addEventListener("scroll", function () {
      if (window.scrollY > 500) {
        $(".toTopBtn").css({ display: "flex" });
      } else {
        $(".toTopBtn").hide();
      }
    });
  },
  created() {},
};
</script>
<template>
  <div class="container">
    <div class="headCont">
      <div class="headCenter">
        <div class="headName">
          <span class="blueText">鲸领航</span>
          <span>海事科技智能管理平台</span>
        </div>
        <div class="headNav">
          <div class="navItem navActive">首页</div>
          <div class="navItem" @click="toScrollFn('gywm')">关于我们</div>
          <div class="navItem" @click="toScrollFn('fwal')">服务案例</div>
          <div class="navItem" @click="toScrollFn('xtkf')">系统开发</div>
          <div class="navItem" @click="toScrollFn('fzlc')">发展历程</div>
          <div class="navItem" @click="toScrollFn('cytd')">创业团队</div>
        </div>
      </div>
    </div>
    <div class="bannerCont">
      <el-carousel height="600px" indicator-position="none">
        <el-carousel-item>
          <div class="bannerItem">
            <img src="/img/banner2.png" />
            <div class="pullCont">
              <div class="banner_main">
                <div class="bannerTitle">如果您是船管公司/中介:</div>
                <div class="bannerTitle">
                  欢迎您免费试用—鲸领航船员招聘企业管理系统
                </div>
                <div class="bannerLi">本系统优势尽显：</div>
                <ul>
                  <li>
                    私域船员人才库搭建，精准掌控简历变动，人才资源尽在掌握。
                  </li>
                  <li>
                    鲸领航小程序加持，岗位管理发布轻松搞定，全国船员主动联络，公海池资源免费开放，拓展招聘边界。
                  </li>
                  <li>
                    员工管理高效升级，KPI
                    可视化，自有数字人才库打造，薪资上船记录智能处理。
                  </li>
                  <li>雇派广场开启同行交流新篇，拒绝孤立，合作共赢。</li>
                  <li>
                    船队管理全面领航，多条船务一键执掌，船员上下船便捷操控，入职离职一键即通，在船时长精准统计，证书到期预警早鸣。
                  </li>
                  <li>
                    公海池精准筛选与小程序被动联系双管齐下，企业私域人才库专属二维码，船员扫码简历便捷入库，简历更新自动同步，企业名称logo推荐表一键生成，工作高效无忧。
                  </li>
                  <li>欢迎试用探索更多智能高效功能。</li>
                </ul>
                <div class="bannerBtn">申请免费试用</div>
              </div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="bannerItem">
            <img src="/img/banner1.png" />
            <div class="pullCont">
              <div class="banner_main banner_color2">
                <div class="bannerTitle">如果您是船东公司:</div>
                <div class="bannerTitle">
                  欢迎您免费试用—鲸领航船员招聘船队管理智慧系统
                </div>
                <div class="bannerLi">本系统优势尽显：</div>
                <ul>
                  <li>
                    高效船队构建与人员调配：快速搭建船队管理框架，一键操作即可完成船员上下船替换，输入船员
                    ID
                    瞬间获取简历并精准安排入队，大幅节省人力调配时间，减少因人员调度不畅导致的运营延误成本。
                  </li>
                  <li>
                    智能数字化管理优势：数字化管理船队及过往船员在船记录，系统智能预警船员证书到期，减少潜在风险与资源损耗，船东可据此提前规划船员培训与换证事宜，优化人力资源与时间成本。
                  </li>
                  <li>
                    数据互通提升效率：小程序与船东端系统数据实时互通，船员简历更新自动同步，船东能及时掌握船员动态，快速筛选合适船员与回流船员，减少招聘周期与成本，提高整体工作效率，让船东在船员管理上更得心应手，更多实用功能待您探索试用。
                  </li>
                </ul>
                <div class="bannerBtn">申请免费试用</div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="comCont hasImg" id="gywm">
      <div class="comMain">
        <div class="comTitle">
          <div>鲸领航—Whale navigation</div>
          <div>专业深耕打造中国海事圈</div>
          <div>数字化管理与应用生态体系</div>
          <div>打破数据壁垒</div>
        </div>
        <div class="comDes">
          <p>
            在海事领域的壮阔蓝图中，鲸领航以开拓者的姿态奋勇前行，矢志专业深耕，全力打造中国海事圈数字化管理与应用生态体系，为行业的革新与发展铸就坚实根基。
          </p>
          <p>
            长久以来，航运业受困于数据的碎片化与孤立化，信息流通仿若涓涓细流，艰难而滞涩。
          </p>
          <p>
            鲸领航敏锐洞察这一桎梏，以无畏的创新精神和精湛的技术实力，倾尽全力打破数据壁垒。我们整合多元数据资源，构建起一个海纳船员信息、船舶动态、航运业务等海量数据的统一平台，让数据的江河湖海得以汇聚交融，奔涌不息。通过先进的数字化管理手段，鲸领航为船东、船员以及海事相关机构开辟全新航道。
          </p>
          <p>
            船东和船管企业可借助我们的系统如臂使指般轻松管理船队，一键调配船员，精准掌控运营成本与效率;船员能在便捷的移动端平台上，实时更新个人信息，精准对接心仪岗位，开启职业发展的崭新航程。
            海事机构则依托鲸领航的大数据分析与智能监控，更高效地履行监管职责，维护航运秩序的安全稳定。
          </p>
          <p>
            我们的团队汇聚了海事领域的资深专家、前沿技术精英以及富有创造力的运营人才，他们以对海事事业的无限热忱和对卓越品质的不懈追求，精心雕琢鲸领航的每一个细节。从系统架构的精心设计到功能模块的反复打磨，从用户体验的深度优化到数据安全的严密防护，鲸领航的每一步成长都凝聚着团队的智慧与汗水。
          </p>
          <p>
            鲸领航，不仅是一套先进的数字化管理系统，更是航运事业迈向智能化未来的领航灯塔。我们将继续秉持专业、创新、共享的理念，与各方携手共进，在这片浩瀚无垠的蓝色海洋上，绘制出更加波澜壮阔的数字化画卷，引领中国海事事业乘风破浪，驶向辉煌的新彼岸。
          </p>
        </div>
      </div>
    </div>
    <div class="mainItem lineBg" id="fwal">
      <div class="mainCenter">
        <div class="mainTitle">
          <div class="bigText">Whale navigation</div>
          <div>
            鲸领航海事数据生态远景：“鲸领航数据生态，数据算法双擎驱动，启航海事新篇，智联八方，破局传统，立航运系统新标，让航运未来触手可及！”
          </div>
        </div>
        <div class="mainContList">
          <div class="mainListItem">
            <img src="/img/card1.png" />
            <div class="mainListItemName">
              <div>鲸领航船员招聘</div>
              <div>小程序</div>
            </div>
            <div class="mainListItemDes">
              海员招聘神器，智能筛选随心聘，公海畅寻引贤才，开启航运新篇。
            </div>
          </div>
          <div class="mainListItem">
            <img src="/img/card2.png" />
            <div class="mainListItemName">
              <div>鲸领航船员招聘</div>
              <div>企业管理系统</div>
            </div>
            <div class="mainListItemDes">
              船队精管，船员优配，证书预警，数据互通，高效运营促航运新发展。
            </div>
          </div>
          <div class="mainListItem">
            <img src="/img/card3.png" />
            <div class="mainListItemName">
              <div>鲸领航船员招聘</div>
              <div>船队管理系统</div>
            </div>
            <div class="mainListItemDes">
              智能管理船队船员，一键优配降成本，数据互通提效快，航运管理更畅达。
            </div>
          </div>
          <div class="mainListItem">
            <img src="/img/card4.png" />
            <div class="mainListItemName">
              <div>鲸领航定制化</div>
              <div>管理体系系统</div>
            </div>
            <div class="mainListItemDes">
              按需定制专属体系管理系统，高效优价，数据智领，开启新航态。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mainItem" id="xtkf">
      <div class="mainCenter">
        <div class="data_title">
          <div class="dataTitleName">项目承接合作</div>
          <div>
            鲸领航致力于开发数据系统及数据应用服务，打造多平台的航海海事圈联合管理软件
          </div>
        </div>
        <div class="dataMain">
          <div class="data_left">
            <div class="data_leftName">鲸领航发展指南针开发模式</div>
            <div class="data_leftDes">
              在航海业数字化转型的浪潮中，数据如浩瀚海洋中的宝藏，而多平台系统数据互通协作则是挖掘这一宝藏的关键航道。鲸领航，作为专注于航海业多平台系统软件开发的先驱者，其独特的联合管理系统模式，宛如精密的航海仪器，精准导航着各个开发环节，确保项目在复杂的多平台协作环境中稳健前行，高效达成目标。
            </div>
            <div class="data_leftBtn">定制开发联系我们</div>
          </div>
          <img src="/img/dataImg.png" />
        </div>
      </div>
    </div>
    <div class="mainItem lineBg" id="cytd">
      <div class="maxCard">
        <div class="cardTitle">
          <div class="cardTitleName">WNM 创业团队</div>
          <div>
            开发生态愿景：数据数字化、 多平台协作、数据可视化与数据应用平台
          </div>
        </div>
        <div class="cardImgList">
          <img src="/img/tx1.png" />
          <img src="/img/tx2.png" />
          <img src="/img/tx3.png" />
          <img src="/img/tx4.png" />
        </div>
      </div>
    </div>
    <div class="comCont" id="fzlc">
      <div class="comMain hasTop">
        <img class="zxtImg" src="/img/zxt.png" />
        <div class="comTitle">
          <div>WNM 鲸领航未来六年发展规划</div>
        </div>
        <div class="comDes comDes_">鲸领航联合管理系统模式：</div>
        <div class="comDes">
          <p>
            鲸领航，致力于深耕航海圈的数字化系统开发，作为航海圈数字化系统开发领域的先驱力量，以卓越的技术实力和对航海业的深刻洞察，专注于打造全方位、智能化的数字化解决方案。其核心团队汇聚了软件研发精英与航海领域资深专家，深度融合前沿科技与航海实践经验。通过鲸领航船员招聘小程序精准的搜索筛选分析、高效的船东船队运营管理模块、便捷的船员信息整合平台等，鲸领航的数字化系统能够显著提升企业员工的效率、降低成本与管理精细化程度。无论是大型航运企业优化全球航线布局，还是中小型船运公司规范内部运营流程，鲸领航都能提供量身定制且持续迭代更新的数字化服务，助力航海从业者在波澜壮阔的海洋事业中稳健领航，开启航海数字化新时代，塑造行业发展新标杆，推动全球航海产业朝着更加智能、高效、可持续的方向加速迈进。
          </p>
        </div>
      </div>
    </div>
    <div class="footCont">
      <div class="footCenter">
        <div class="footLeft">
          <!-- <img src="/img/footLogo.png" /> -->
          <div class="talkCont">
            <div class="talkItem">WeChat ： 19825091207</div>
            <div class="talkItem">联系QQ：2837840766</div>
            <div class="talkItem">手机号码：19825091207</div>
            <div class="talkItem">联系邮箱：2837840766@qq.com</div>
            <div class="talkItem">小红书：鲸领航船员招聘AI智慧管理平台</div>
            <div class="talkItem">抖音：鲸领航船员招聘</div>
          </div>
        </div>
        <div class="footForm">
          <div class="formInputCont">
            <div class="formInput">
              <div class="formName">您的姓名<span class="must">*</span></div>
              <div class="formInputItem">
                <input type="text" placeholder="请输入您的姓名" />
              </div>
            </div>
            <div class="formInput">
              <div class="formName">联系方式<span class="must">*</span></div>
              <div class="formInputItem">
                <input type="text" placeholder="请输入您的联系方式" />
              </div>
            </div>
            <div class="formInput">
              <div class="formName">您的地址<span class="must">*</span></div>
              <div class="formInputItem">
                <input type="text" placeholder="请输入您的联系地址" />
              </div>
            </div>
          </div>
          <div class="textAreaCont">
            <div class="formName">合作需求<span class="must">*</span></div>
            <textarea placeholder="我能为您做什么"></textarea>
          </div>
          <div class="subBtn">提交</div>
        </div>
      </div>
    </div>
    <div class="rightCont">
      <div class="rightItem">
        <div class="iconfont icon-kefu2"></div>
        <div>在线咨询</div>
        <div class="rightMask maskWx">
          <img src="/img/erweima.png" />
          <div>微信扫码添加客服</div>
        </div>
      </div>
      <div class="rightItem">
        <div class="iconfont icon-dianhua2"></div>
        <div>电话咨询</div>
        <div class="rightMask maskTel">
          <div class="maskName">电话咨询</div>
          <div>欢迎致电，我们将为您提供帮助！</div>
          <div class="maskTelNum">
            <div class="iconfont icon-dianhua2"></div>
            <div>18483613963</div>
          </div>
        </div>
      </div>
      <div class="rightItem toTopBtn" @click="toTop()">
        <div class="iconfont icon-shangjiantou"></div>
        <div>回到顶部</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.headCont {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  padding: 50px 0;
  .headCenter {
    width: 80%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    .headName {
      font-weight: bold;
      font-size: 28px;
      color: #e5e5e5;
      .blueText {
        color: #02b2b5;
      }
    }
    .headNav {
      font-size: 15px;
      cursor: pointer;
      display: flex;
    }
    .navItem {
      color: #fff;
      margin-left: 30px;
    }
    .navActive {
      color: #02b2b5;
    }
    .navItem:hover {
      color: #02b2b5;
    }
  }
}
.bannerCont {
  width: 100%;
  overflow: hidden;
  .bannerItem {
    position: relative;
    img {
      width: 120%;
      margin-left: -12%;
      margin-top: -20px;
    }
    .pullCont {
      width: 100%;
      position: absolute;
      padding-top: 150px;
      padding-bottom: 50px;
      box-sizing: border-box;
      left: 0;
      top: 0;
      .banner_main {
        color: #4ae0ec;
        width: 80%;
        margin: 0 auto;
        .bannerTitle {
          font-size: 25px;
          margin-top: 30px;
        }
        .bannerLi,
        ul {
          color: #378ab3;
          font-size: 12px;
          width: 55%;
          margin-top: 10px;
          li {
            margin-top: 5px;
            list-style: outside;
          }
        }
        .bannerBtn {
          width: 140px;
          padding: 10px 0;
          text-align: center;
          border: 1px solid #4ae0ec;
          margin-top: 15px;
          border-radius: 50px;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.2s linear;
        }
      }
    }
  }
}
.hasImg {
  background-image: url("/img/comImg.png");
  background-size: 100% 100%;
}
.comCont {
  width: 100%;

  .comMain {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 250px;
    position: relative;
    .zxtImg {
      position: absolute;
      right: -80px;
      top: 80px;
      width: 600px;
    }
    .comTitle {
      font-size: 30px;
      color: #02b2b5;
      font-weight: bold;
      padding-top: 50px;
    }
    .comDes {
      color: #999;
      width: 50%;
      font-size: 14px;
      p {
        text-indent: 28px;
      }
    }
    .comDes_ {
      margin: 20px 0;
    }
  }
  .hasTop {
    padding-top: 100px;
  }
}
.mainItem {
  padding: 150px 0;
  box-sizing: border-box;
  .mainCenter {
    width: 80%;
    margin: 0 auto;
    .mainTitle {
      text-align: center;
      color: #fff;
      .bigText {
        font-size: 32px;
        margin-bottom: 15px;
      }
    }
    .data_title {
      text-align: center;
      color: #999;
      .dataTitleName {
        color: #02b2b5;
        font-size: 32px;
      }
    }

    .dataMain {
      width: 100%;
      display: flex;
      padding-top: 50px;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      .data_left {
        width: 40%;
        .data_leftName {
          font-size: 16px;
        }
        .data_leftDes {
          font-size: 14px;
          color: #666;
          margin: 30px 0;
        }
        .data_leftBtn {
          width: 160px;
          text-align: center;
          padding: 10px 0;
          border-radius: 50px;
          font-size: 12px;
          cursor: pointer;
          background-image: linear-gradient(to right, #5bb1dc, #82ebec);
          color: #fff;
        }
      }
      img {
        width: 50%;
      }
    }
    .mainContList {
      display: flex;
      margin-top: 100px;
      justify-content: space-between;
      .mainListItem {
        width: 23%;
        background-color: #fff;
        padding: 50px 15px;
        box-sizing: border-box;
        border-radius: 10px;
        cursor: pointer;
        text-align: center;
        img {
          height: 100px;
        }
      }
      .mainListItemName {
        font-size: 16px;
        font-weight: bold;
        margin: 30px 0 10px;
      }
      .mainListItemDes {
        font-size: 13px;
        color: #999;
      }
    }
  }
  .maxCard {
    max-width: 1200px;
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 50px;
    box-sizing: border-box;
    .cardTitle {
      text-align: center;
      color: #999;
      .cardTitleName {
        font-size: 32px;
        color: #02b2b5;
      }
    }
    .cardImgList {
      display: flex;
      margin-top: 50px;
      align-items: center;
      justify-content: space-between;
      img {
        width: 24%;
      }
    }
  }
}
.lineBg {
  background-image: linear-gradient(to right, #192253, #4ca6ac);
}
.footCont {
  background-image: url("/img/foot_bg.png");
  background-size: 100% 100%;
  padding: 80px 0;
  box-sizing: border-box;
  .footCenter {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .footLeft {
      color: #fff;
      img {
        height: 60px;
        margin-bottom: 120px;
      }
      .talkCont {
        div {
          margin-bottom: 10px;
        }
      }
    }
    .footForm {
      width: 60%;
      .formInputCont {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff;

        .formInput {
          width: 48%;
          margin-bottom: 30px;
          .formInputItem {
            width: 100%;
            background-color: #fff;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 8px;
            border-radius: 3px;
            input {
              width: 100%;
              background: none;
              border: none;
              outline: none;
              color: black;
              font-size: 14px;
            }
          }
        }
      }
      .must {
        color: red;
        font-size: 20px;
        position: relative;
        top: 5px;
        left: 3px;
      }
      .textAreaCont {
        width: 100%;
        color: #fff;
        textArea {
          color: black;
          width: 100%;
          height: 100px;
          margin-top: 8px;
          padding: 15px;
          box-sizing: border-box;
        }
      }
      .subBtn {
        width: 48%;
        background-color: #02b2b5;
        color: #fff;
        text-align: center;
        padding: 10px 0;
        margin-top: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
<style>
.rightCont {
  position: fixed;
  right: 30px;
  bottom: 100px;
  width: 80px;
  padding: 0 10px;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  /* overflow: hidden; */
}
.rightItem {
  height: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border-bottom: 1px solid #ebebeb;
  position: relative;
}
.rightMask {
  display: none;
}
.rightItem:hover .rightMask {
  display: block;
}
.maskWx {
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  width: 120px;
  position: absolute;
  right: 80px;
  top: 0;
  color: black;
  font-weight: bold;
  box-shadow: 0 0 10px #ccc;
}
.maskWx img {
  width: 100%;
}
.maskTel {
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  width: 200px;
  position: absolute;
  right: 80px;
  top: 0;
  box-shadow: 0 0 10px #ccc;
  color: black;
  font-size: 12px;
}
.maskName {
  font-size: 20px;
  margin-bottom: 10px;
}
.maskTelNum {
  display: flex;
  margin-top: 15px;
  align-items: center;
  font-size: 24px;
}
.rightItem .iconfont {
  font-size: 26px;
}
.maskTelNum > .iconfont {
  color: #02b2b5;
  font-size: 28px;
  margin-right: 5px;
}
.rightItem:hover {
  color: #02b2b5;
}
.toTopBtn {
  display: none;
  border-bottom: none;
}
</style>
